<template>
	<view class="tree_select">
		<template v-if="selectType == 1">
			<view class="type_1">
				<view class="select_type_list">
					<view class="select_type_item" :class="{'active':index == classA.index}" v-for="(item,index) in list"
						@click="getClassA(item,index)">
						{{item.departName || item.name || ''}}
					</view>
				</view>
				<view class="select_list">
					<template v-if="classA.childList && classA.childList.length">
						<view class="select_item" :class="{'active':childIndex == classB.index}"
							v-for="(childItem,childIndex) in classA.childList" @click="chooseSelect(childItem,childIndex)">
							{{childItem.departName || childItem.name || ''}}
						</view>
					</template>
				</view>
			</view>
		</template>
		<template v-if="selectType == 2">
			<view class="type_2">
				<view class="screen">
					<view class="screen_row">
						<view class="screen_title">
							医生职称
						</view>
						<view class="screen_list">
							<view class="screen_item active">
								不限
							</view>
							<view class="screen_item" v-for="item in list" :key="item.id">
								{{item.name || item.departName}}
							</view>
						</view>
					</view>
				</view>
				<view class="screen_btn_group">
					<view class="screen_btns" @click="close">取消</view>
					<view class="screen_btns confirm">确认</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	/**
	 * treeSelect 
	 * @description 下拉列表样式展示
	 * @property {Boolean} 	selectType 		下拉样式 默认 1 有两种样式
	 */
	import {
		queryAllDisease,
		getDepartTree,
		queryTitleType,
		queryHospitaltype,
		queryHospitallevel
	} from '@/api/index.js'
	import address from '@/static/area.json'
	export default {
		data() {
			return {
				list: [],
				classA: {},
				classB: {}
			}
		},
		props: {
			selectType: {
				type: [String, Number],
				default: 1
			},
			selectName: {
				type: [String, Number],
				default: ''

			}
		},
		watch: {
			selectName: {
				handler(newV) {
					this.restList();
					switch (newV) {
						case 'department':
							this.getDepartment()
							break;
						case 'disease':
							this.getAllDisease()
							break;
						case 'screen':
							this.queryTitleType()
							break;
						case 'location':
							this.list = address
							this.getClassA(this.list[0], 0)
							break;
						case 'hospitaltype':
							this.queryHospitaltype()
							break;
						case 'hospitallevel':
							this.queryHospitallevel()
							break;
						default:
							break;
					}
				},
				immediate:true
			}
		},
		created() {},
		computed: {
			getIndex() {
				return (item, index) => {
					return `${item.name || item.departName}${item.id || item.departId}${index}`
				}
			}
		},
		methods: {
			close(){
				this.$emit('close', true)
			},
			getClassA(item, index) {
				item.index = index
				item.childList = item.childDiseaseList || item.children
				this.classA = item
				this.classB = []
			},
			chooseSelect(item, index) {
				this.classB = {
					...item,
					index
				}
				this.$emit('getScreenItem', this.classB)
			},
			// 疾病
			getAllDisease() {
				queryAllDisease().then(res => {
					this.list = res.data
					if (this.list.length) this.getClassA(this.list[0], 0)
				}).catch(err => {
					console.log(err)
				})
			},
			// 科室
			getDepartment() {
				getDepartTree().then(res => {
					this.list = res.data
					// 默认选择第一
					if (this.list.length) this.getClassA(this.list[0], 0)
				}).catch(err => {
					console.log(err)
				})
			},
			// 医生职称
			queryTitleType() {
				queryTitleType().then(res => {
					this.list = res.data
					// 默认选择第一
					if (this.list.length) this.getClassA(this.list[0], 0)
				}).catch(err => {
					console.log(err)
				})
			},
			queryHospitaltype() {
				queryHospitaltype().then(res => {
					this.list = res.data
					// 默认选择第一
					if (this.list.length) this.getClassA(this.list[0], 0)
				}).catch(err => {
					console.log(err)
				})
			},
			queryHospitallevel() {
				queryHospitallevel().then(res => {
					this.list = res.data
					// 默认选择第一
					if (this.list.length) this.getClassA(this.list[0], 0)
				}).catch(err => {
					console.log(err)
				})
			},
			restList() {
				this.list = []
				this.classA = {}
				this.classB = {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tree_select {
		width: 100%;
		height: 100%;

		.type_1 {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.select_type_list {
				flex: 0 0 30%;
				max-width: 30%;
				height: 100%;
				box-sizing: border-box;
				overflow-y: auto;
				background-color: #F9F9F9;

				.select_type_item {
					padding: 30rpx;
					font-size: 28rpx;
					color: #333333;

					&.active {
						position: relative;
						background-color: #FFF;
						font-weight: bold;
						font-size: 28rpx;
						color: #3B6CFE;

						&::after {
							content: '';
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 6rpx;
							height: 35%;
							border-radius: 2rpx;
							background-color: #3B6CFE;
						}
					}
				}
			}

			.select_list {
				flex: 0 0 70%;
				max-width: 70%;
				height: 100%;
				padding: 50rpx;
				background-color: #FFF;
				box-sizing: border-box;
				overflow-y: auto;

				.select_item {
					padding: 30rpx 20rpx;
					font-size: 28rpx;
					color: #333333;

					&.active {
						background-color: #DDE5FE;
						border-radius: 20rpx;
						font-weight: bold;
						color: #3B6CFE;
					}
				}
			}
		}

		.type_2 {
			width: 100%;
			height: 100%;
			overflow-y: auto;
			box-sizing: border-box;


			.screen {
				padding: 30rpx;
				background-color: #FFF;

				.screen_row {
					margin-top: 30rpx;

					&:first-child {
						margin: 0;
					}

					.screen_title {
						font-size: 30rpx;
						color: #999999;
					}

					.screen_list {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.screen_item {
							margin-top: 30rpx;
							margin-right: 40rpx;
							padding: 18rpx 20rpx;
							font-size: 28rpx;
							color: #333333;
							border-radius: 15rpx;
							border: 1px solid #EEEEEE;

							&.active {
								color: #3B6CFE;
								background-color: rgba(59, 108, 254, 0.1);
								border: none;
							}
						}
					}
				}
			}

			.screen_btn_group {
				width: 100%;
				display: flex;
				align-items: center;
				border-bottom-left-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
				overflow: hidden;

				.screen_btns {
					flex: 1;
					text-align: center;
					padding: 25rpx 0;
					background-color: #E1E7FA;
					font-size: 28rpx;
					color: #333333;

					&.confirm {
						color: #fff;
						background-color: #3B6CFE;
					}
				}
			}
		}


	}
</style>